<template>
  <div>
    <el-form :inline="true" :model="docSearchForm" :rules="docSearchFormRules" ref="docSearchForm" style="width:650px; margin:0 auto;">
      <el-form-item prop="keyword">
        <el-input class="inline-input" style="width:500px" v-model="docSearchForm.keyword" placeholder="请输入关键字" auto-complete="off" @keyup.enter.native="docSearch('')"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="docSearch('')" icon="el-icon-search" :loading="docSearchFormLoading">查询</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" style="margin-top:20px" @tab-click="tabClick" v-if="doclistshow">
      <el-tab-pane v-for="(item, index) in doclist" :key="index" keys :label="item.Name +'('+item.Num+'次)'" :name="item.Name">
      </el-tab-pane>
    </el-tabs>
    <div style="position:fixed;right:90px;top:30px; background:#fff;padding:20px;" v-if="numbtnshow">
      <el-button @click="nextkey(-1)" :disabled="currentkeyindex<=0||keynum===0" type="success">上一个</el-button>&nbsp;&nbsp; {{currentkeyindex+1}} / {{keynum}} <el-button @click="nextkey(1)" :disabled="currentkeyindex >= keynum-1 || keynum === 0" type="success">下一个</el-button>
    </div>
    <div class="bigfont" v-html="docshow"></div>
  </div>
</template>
<script>
export default {
  props: {
    resetdocform: ''
  },
  data () {
    return {
      docSearchFormVisible: false,
      docSearchForm: {},
      docSearchFormRules: {
        keyword: [{ required: true, message: '请输入关键字', trigger: 'blur' }]
      },
      docSearchFormLoading: false,
      doclistshow: false,
      doclist: [],
      activeName: '',
      docshow: '',
      currentkeyindex: -1,
      keynum: 0,
      numbtnshow: false
    }
  },
  watch: {
    resetdocform (val) {
      console.log('重置子组件')
      this.docshow = ''
      this.doclistshow = false
      this.currentkeyindex = -1
      this.keynum = 0
      this.activeName = ''
      this.numbtnshow = false
      this.docSearchForm = {}
      this.doclist = []
    }
    // $refs.tree2.getCurrentNode()
  },
  methods: {
    docSearch (docname) {
      var _this = this
      this.$refs.docSearchForm.validate((valid) => {
        console.log('valid:' + valid)
        if (valid) {
          let para = {
            key: this.docSearchForm.keyword,
            filename: docname
          }
          this.$http
            .post(`/ziliao/search`, para)
            .then(function (response) {
              // _this.doclistLoading = false
              if (response.data.IsSuccess === true) {
                console.log('查询成功')
                _this.doclistshow = true
                if (docname === '') {
                  _this.doclist = response.data.Result
                  _this.activeName = ''
                  _this.docshow = ''
                  _this.currentkeyindex = -1
                  _this.keynum = 0
                  _this.numbtnshow = false
                } else {
                  _this.docshow = ''
                  _this.docshow = response.data.Result
                  _this.numbtnshow = true
                  console.log('后台传来的keynum' + response.data.KeyNum)
                  _this.keynum = response.data.KeyNum
                  _this.currentkeyindex = -1
                }
              } else {
                console.log('查询失败:' + response.data.Msg)
                _this.$message({
                  message: '查询失败:' + response.data.Msg,
                  type: 'error'
                })
              }
            })
            .catch(function (error) {
              console.log(error)
              _this.$message({
                message: '网络查询失败:' + error,
                type: 'error'
              })
            })
        }
      })
    },
    tabClick () {
      this.docSearch(this.activeName)
    },
    nextkey (step) {
      console.log('step:' + step + 'currentkeyindex:' + this.currentkeyindex + 'keynum' + this.keynum)
      this.currentkeyindex = this.currentkeyindex + step
      if (this.currentkeyindex >= 0 && this.currentkeyindex <= this.keynum - 1) {
        if (this.currentkeyindex - step >= 0 && this.currentkeyindex - step <= this.keynum - 1) {
          document.getElementsByClassName('.findkey')[this.currentkeyindex - step].style.backgroundColor = ''
        }
        document.getElementsByClassName('.findkey')[this.currentkeyindex].scrollIntoView()
        document.getElementsByClassName('.findkey')[this.currentkeyindex].style.backgroundColor = 'yellow'
      } else {
        this.currentkeyindex = this.currentkeyindex - step
        this.$message({
          message: '已超出文章范围',
          type: 'error'
        })
      }
    }
  },
  mounted () {
  }
}
</script>
<style>
.bigfont{
  color: #000;
  font-size:20px;
  line-height: 150%;
  margin:20px;
}
</style>
